<template>
  <div>
  <label class="layui-form-label">查询时间</label>
  <div class="layui-inline" style="width: 250px;display:none;" >
    <input type="text" name="_time_range" class="layui-input" placeholder="请选择查询时间" >
  </div>
  <div class="layui-inline" style="width:150px;" >
    <select id="quick_date" v-model="date"  @on-change="satusSelect" >
      <option data-type="afterDay" value="1">今日</option>
      <option data-type="afterDay1" value="0">昨天</option>
      <option data-type="afterDay" value="2">本周</option>
      <option data-type="afterDay" value="3"></option>

    </select>
  </div>
  </div>

</template>

<script>
import { getTimeArr, dateFormat } from '@/common/utils'

export default {
  data() {
    return {
      date: []
    }
  },
  methods: {
    satusSelect(val){
      console.log(val);
    },
    setDate(type) {
      const { from, to } = getTimeArr(type)
      this.date = [new Date(from), new Date(to)]
    },
    queryVal() {
      if (this.date.length > 0) {
        const begin = this.date[0].getTime()
        const end = this.date[1].getTime()
        const beginTime = dateFormat(begin)
        const endTime = dateFormat(end)
        return { beginTime, endTime }
      }
      return null
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button{
  background: #1E9FFF;
  color: #fff
}
.date {
  background: white;
  padding: 15px;
  font-size: 13px;
  & > span {
    display: inline-block;
    line-height: 36px;
    //margin-right: 10px;
    padding: 0 10px;
    background: $--light-color-primary;
  }
  .el-date-editor {
    height: 36px;
    line-height: 36px;
    vertical-align: top;
    width: 300px;
    .el-range__icon {
      line-height: 30px;
    }
    & + .el-button {
      margin-left: 10px;
    }
    ::v-deep .el-range-separator {
      width: 8%;
      line-height: 30px;
      vertical-align: top;
    }
    ::v-deep input {
      height: 28px;
      vertical-align: top;
    }
  }
  .el-button {
    padding: 10px;
  }
}
</style>
